<template>
	<view class="choose-sku-container" :style="{'z-index': zIndex}">
		<view class="choose-sku-model" @tap="cancelSku(null)" @longtap="cancelSku(null)" @touchmove="cancelSku(null)">
		</view>
		<view class="choose-sku-box" :style="skuBoxStyle">
			<text class="qh-rt-single qh-rt-a-ziyuan1 choose-sku-close-icon" @tap="cancelSku(null)"></text>
			<view class="choose-sku-title-box">
				<view class="choose-sku-goods-image">
					<qh-goods-image class="car-goods-image" :src="skuInfo.skuImg" size="200" preview></qh-goods-image>
				</view>
				<view class="choose-sku-goods-title-right-box">
					<view class="choose-sku-goods-name">{{skuInfo.skuName}}</view>
					<view class="choose-sku-goods-stock" v-if="goodsType == 2">库存 {{skuInfo.skuNum}}</view>
					<view class="choose-sku-price-box">
						<text class="choose-sku-price-title">单价</text>
						<view class="choose-sku-price" v-if="skuInfo.sku_promotion_status">￥{{skuInfo.promotion_price}}
							<block v-if="skuInfo.promotion_price<skuInfo.skuPrice">
								<text class="price_pass"><text class="pass">￥{{skuInfo.skuPrice}}</text></text>
							</block>
						</view>
						<view v-else class="choose-sku-vip-price">
							<view v-if="showPlusPrice()" class="flex-cn">
								<text class="plus-price-color">￥{{skuInfo.skuPlusPrice}}</text>
								<text class="plus-price-icon">PLUS</text>
							</view>
							<view v-if="showVipPrice()" class="flex-cn">
								<text class="price-color">￥{{skuInfo.skuShopMemPrice}}</text>
								<text class="vip-price-icon">VIP</text>
							</view>
							<view v-if="showOnlinePrice()" class="price-color">￥{{skuInfo.skuPrice}}</view>
						</view>
					</view>
				</view>
				<view class="choose-sku-attr-box" v-if="skuInfo.isSku">
					<view class="choose-sku-attr" v-for="(item, pIndex) in skuInfo.skuList" :key="pIndex">
						<view class="choose-sku-attr-name">{{item.name}}</view>
						<view class="choose-sku-list-box">
							<block v-for="(list, cIndex) in item.list" :key="cIndex">
								<view v-if="list.status==1" :class="'choose-sku-list-name' + (skuInfo.skuSelectIndex[pIndex]==cIndex?' choose-sku-select':'')"
									@tap="checkSku" :data-p-index="pIndex" :data-c-index="cIndex">{{list.name}}</view>
								<view v-else class="choose-sku-list-name choose-sku-disable-check">{{list.name}}</view>
							</block>
						</view>
					</view>
				</view>
				<view v-if="skuInfo.showChangeNum" class="choose-sku-change-con" :style="skuInfo.isSku?'border-top:1rpx solid #eee':'border:none'">
					<view class="choose-sku-change-tag">数量</view>
					<view class="choose-sku-change border">
						<text class="qh-rt-single qh-rt-a-zu4424 choose-sku-change-icon" @click.stop="less"></text>
						<view class="choose-sku-num">
							<input v-if="skuInfo.canChangeCarNum" min="1" type="number" @input="inputNum" @blur="blurGoods" :value="skuInfo.shoppingNum"
								placeholder="1" placeholder-class="choose-sku-p"></input>
							<text v-else>{{skuInfo.shoppingNum}}</text>
						</view>
						<text class="qh-rt-single qh-rt-jia1 choose-sku-change-icon" @click.stop="add"></text>
					</view>
				</view>
				<view class="choose-sku-btn">
					<view v-if="!skuInfo.disSkuClick" class="choose-sku-btn-sure" @tap="sureSku">{{skuInfo.btnText}}
					</view>
					<view v-else class="choose-sku-btn-sure choose-sku-btn-sure-disabled">已指定规格</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	var app = getApp().globalData;
	export default {
		name: 'choose-sku',
		props: {
			sku: {
				type: Object,
				default: {}
			},
			goodsType: {
				type: [Number, String],
				default: 2,
			}, //1商户商品  2门店商品
			goodsinfo: {
				type: Object,
				default: {}
			},
			skuselect: {
				type: Array,
				default: []
			},
			skutype: {
				type: Number,
				default: 1
			},
			zIndex: {
				type: [Number, String],
				default: 2147483647
			}
		},
		data() {
			return {
				skuInfo: {
					skuImg: '', //规格弹框图片
					skuName: '', //规格名称
					skuSelectIndex: [], //已选规格下标列表
					isSku: true, //是否是规格商品，针对扫码购
					shoppingNum: 1, //选择规格或扫码购商品详情时的加入购物车的数量
					canChangeCarNum: 1, //是否可以修改规格弹框数量
					skuPrice: '', //商品规格价
					skuNum: '', //商品规格库存
					skuShopMemStatus: 2, //规格商品是否开启普通会员价  1开启  2关闭
					skuShopMemPrice: '', //规格商品普通会员价
					skuPlusMemStatus: 2, //规格商品是否开启PLUS会员价  1开启  2关闭
					skuPlusPrice: '', //规格商品PLUS会员价
					sku_promotion_status: 0, //规格商品是否开启促销
					promotion_price: 0, //规格商品促销价
					canChangeAddNum: true, //是否可以增加
					goods_num: 0,
					showChangeNum: true, //是否显示选择数量
					btnText: '加入购物车', //按钮文字
				},
				goods: {},
				oldSkuId: 0,
				skuDetailList: [],
				selectSkuDetailId: '',
				selectArr: [], //已选规格id列表
				skuSelect: [],
				shopItemInfo: [],
				selectSkuName: '',
				temSkuPrice: '',
				selectSkuNum: 1,
			}
		},
		methods: {
			//取消修改规格
			cancelSku(data) {
				this.$emit('close', data)
			},
			//判断是否存在规格组合
			isMay(result) {
				for (var i in result) {
					if (result[i] == 0) {
						return 1;
					}
				}
				var s = this.shopItemInfo[result];
				if (s && s.goods_num >= 1) {
					return 1;
				} else {
					return 0;
				}
			},
			//确认选择规格
			sureSku() {
				switch (this.skutype) {
					case 1:
						this.submitSku();
						break;
					case 2:
						this.changeShopCarSku();
						break;
					case 3:
					case 5:
						let obj = {
							selectSkuDetailId: this.selectSkuDetailId,
							selectArr: this.selectArr,
							selectSkuName: this.selectSkuName,
							temSkuPrice: this.temSkuPrice
						}
						this.cancelSku(obj)
						break;
					case 4:
						let obj1 = {
							selectSkuDetailId: this.selectSkuDetailId,
							selectSkuNum: this.selectSkuNum
						}
						this.cancelSku(obj1)
						break;
				}
			},

			submitSku() {
				if (this.selectSkuDetailId > 0 && this.skuInfo.isSku) {
					this.toAddToCar({
						goods_id: this.goods.goods_id,
						num: this.skuInfo.shoppingNum,
						sku_id: this.selectSkuDetailId
					});
				} else if (!this.skuInfo.isSku) {
					this.toAddToCar({
						goods_id: this.goods.goods_id,
						num: this.skuInfo.shoppingNum
					});
				} else {
					uni.showToast({
						title: '请完善规格',
						icon: 'none',
						// #ifndef MP-ALIPAY
						duration: 1000,
						// #endif
					})
				}
			},

			//修改门店购物车商品规格
			changeShopCarSku() {
				if (this.selectSkuDetailId == -1) return;
				getApp().globalData.sendRequest({
					url: '/Shopping/changeSelectSku_v1',
					type: "post",
					data: {
						id: this.goods.id,
						sku_id: this.selectSkuDetailId
					},
					showLoading: false,
					success: (res) => {
						if (res.status == 1) {
							uni.showToast({
								title: res.msg,
								// #ifndef MP-ALIPAY
								duration: 1000,
								// #endif
								mask: true
							});
							this.cancelSku(null)
						} else if (res.status == 2) {
							uni.showToast({
								title: res.msg,
								// #ifndef MP-ALIPAY
								duration: 1000,
								// #endif
								mask: true
							});
							this.cancelSku(null)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								// #ifndef MP-ALIPAY
								duration: 1500,
								// #endif
								mask: true
							});
						}
					}
				});
			},

			//添加到购物车
			async toAddToCar(data) {
				let res;
				if (this.goodsType == 1) {
					if (this.goods.id) {
						data.id = this.goods.id;
					}
					res = await this.$mutations.setShoppingCar(data);
				} else {
					data.fixed_num = this.sku.canChangeCarNum == 1 ? 0 : 1; //是否不可修改数量
					data.type = 1;
					data.goods_type = 2;
					res = await this.$mutations.setShoppingCar(data);
				}
				if (res) {
					this.sku.canChangeCarNum = 1;
					this.sku.canChangeAddNum = true;
					let sku_id_list = this.selectArr.join(',');
					this.cancelSku({
						sku_id_list: sku_id_list,
						sku_name: this.selectSkuName,
						sku_id: this.selectSkuDetailId,
						online_price: this.shopItemInfo[sku_id_list].online_price,
						shop_mem_price: this.shopItemInfo[sku_id_list].shop_mem_price,
						plus_price: this.shopItemInfo[sku_id_list].plus_price,
						image: this.shopItemInfo[sku_id_list].path,
					})
				}
			},

			//输入规格弹框数量
			inputNum(e) {
				this.skuInfo.shoppingNum = e.detail.value;
				this.selectSkuNum = e.detail.value;
			},

			//规格弹框数量减少
			less() {
				if (this.skuInfo.canChangeCarNum && this.skuInfo.canChangeAddNum && this.skuInfo.shoppingNum > 1) {
					let num = parseFloat(this.skuInfo.shoppingNum);

					if (num > 1) {
						this.skuInfo.shoppingNum = num - 1;
						this.selectSkuNum = this.skuInfo.shoppingNum;
					}
				}
			},

			//规格弹框数量增加
			add() {
				if (this.skuInfo.canChangeCarNum && this.skuInfo.canChangeAddNum && this.skuInfo.shoppingNum < this.skuInfo.skuNum) {
					let num = parseInt(this.skuInfo.shoppingNum);

					if (num < this.goods.goods_num) {
						this.skuInfo.shoppingNum = num + 1;
						this.selectSkuNum = this.skuInfo.shoppingNum;
					}
				}
			},

			//规格弹框数量输入框失焦
			blurGoods(e) {
				let num = e.detail.value;
				let goods_num = this.goods.goods_num;

				if (num <= goods_num && num < this.skuInfo.skuNum) {
					if (num < 1) {
						num = 1;
					} else {
						num = parseInt(num);
					}
				} else {
					num = goods_num < this.skuInfo.skuNum ? goods_num : this.skuInfo.skuNum;
				}

				this.skuInfo.shoppingNum = num;
				this.selectSkuNum = this.skuInfo.shoppingNum;
			},

			//点击规格
			checkSku(e) {
				if (this.skuInfo.disSkuClick) return;

				let pIndex = e.currentTarget.dataset.pIndex;
				let cIndex = e.currentTarget.dataset.cIndex;
				let skuList = this.skuInfo.skuList;
				let selectArr = this.selectArr;
				if (this.selectArr[pIndex] != skuList[pIndex].list[cIndex].id) {
					this.selectArr[pIndex] = skuList[pIndex].list[cIndex].id;
					this.skuInfo.skuSelectIndex[pIndex] = cIndex;
				} else {
					this.selectArr[pIndex] = 0;
					this.skuInfo.skuSelectIndex[pIndex] = -1;
				}
				this.$forceUpdate()
				this.checkItem();
			},

			//展示商品规格
			showGoodsSku(index) {
				var goodsInfo = this.goods;
				// console.log(this.goods, '------goods')
				var skuSelectIndex = [];
				var selectArr = [];
				if (goodsInfo.skuAttr && goodsInfo.skuAttr.length > 0) {
					if (goodsInfo.select_sku_id && goodsInfo.select_sku_id != '' && goodsInfo.select_sku_id != 0) {
						var tempArr = goodsInfo.sku_id_list;
						tempArr = tempArr.split(',');
						for (var i = 0; i < tempArr.length; i++) {
							var arr = goodsInfo.skuAttr[i].list;
							for (var j = 0; j < arr.length; j++) {
								if (arr[j].id == tempArr[i]) {
									skuSelectIndex.push(j);
									selectArr.push(arr[j].id);
								}
							}
						}
					} else {
						for (var i = 0; i < goodsInfo.skuAttr.length; i++) {
							skuSelectIndex.push(-1);
							selectArr.push(0);
						}
					}
				}
				// console.log(this.skuInfo)
				// console.log(selectArr)

				this.skuInfo.skuSelectIndex = skuSelectIndex;
				this.skuInfo.skuList = goodsInfo.skuAttr && JSON.parse(JSON.stringify(goodsInfo.skuAttr));
				this.skuInfo.skuImg = goodsInfo.goods_image;
				this.skuInfo.skuName = goodsInfo.goods_name;
				this.skuInfo.skuPrice = goodsInfo.online_price;
				this.skuInfo.disSkuClick = Number(goodsInfo.sku_id) ? true : false;
				this.setData({
					selectSkuDetailId: 0,
					skuDetailList: goodsInfo.skuList,
					selectArr: selectArr,
				})
				this.cratedSku();
			},

			//生成规格
			cratedSku() {
				// console.log('触发生成规格cratedSku')
				var skuDetailList = this.skuDetailList;
				var shopItemInfo = {};

				for (var i in skuDetailList) {
					shopItemInfo[skuDetailList[i].sku_id_list] = skuDetailList[i];
				}

				this.skuInfo.canChangeAddNum = this.skuInfo.skuSelectIndex.indexOf(0) == -1 ? true : false;
				this.setData({
					shopItemInfo: shopItemInfo,
				});
				this.checkItem();
			},

			//判断其他规格是否能点击
			checkItem() {
				// console.log('触发判断其他规格是否能点击checkItem')
				let skuInfo = this.skuInfo;
				let option = skuInfo.skuList;
				let selectArr = this.selectArr;
				let result = []; //定义数组存储被选中的值
				for (let i in option) {
					result[i] = selectArr[i] ? selectArr[i] : 0;
				}

				for (let i in option) {
					let last = result[i];
					for (let k in option[i].list) {
						result[i] = option[i].list[k].id;
						option[i].list[k].status = this.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
					}
					result[i] = last;
				}
				skuInfo.skuList = option;
				selectArr = this.selectArr;
				// console.log("selectArr.indexOf(0)=", selectArr, selectArr.indexOf(0))
				if (selectArr.indexOf(0) == -1) {
					let id_list = selectArr.join(','); //skuImg
					let goods_sku = this.shopItemInfo[id_list];
					// console.log('goods_sku', goods_sku)
					skuInfo.skuPrice = goods_sku.online_price;
					skuInfo.skuNum = parseInt(goods_sku.goods_num);
					skuInfo.skuShopMemPrice = goods_sku.shop_mem_price;
					skuInfo.skuImg = goods_sku.goods_img;
					skuInfo.shoppingNum = skuInfo.shoppingNum < parseInt(goods_sku.goods_num) ? skuInfo.shoppingNum : parseInt(goods_sku.goods_num);
					// console.log(skuInfo)
					skuInfo.canChangeAddNum = true;
					skuInfo.skuPlusPrice = goods_sku.plus_price;
					skuInfo.sku_promotion_status = goods_sku.promotion_status && goods_sku.promotion_status == 1 ? 1 : 0;
					skuInfo.promotion_price = goods_sku.promotion_status && goods_sku.promotion_status == 1 ? goods_sku.act_price : 0;
					let sku_name = '';
					if (this.goodsType == 1) {
						this.skuInfo.skuSelectIndex.forEach((item, i) => {
							sku_name += i > 0 ? (',' + this.skuInfo.skuList[i].list[item].name) : this.skuInfo.skuList[i].list[item].name;
						})
					} else {
						sku_name = goods_sku.name;
					}
					this.selectSkuDetailId = goods_sku.id;
					this.selectSkuName = sku_name;
					this.temSkuPrice = goods_sku.online_price;
					this.skuInfo = skuInfo;
				} else {
					skuInfo.skuPrice = this.goods.online_price;
					skuInfo.skuNum = parseInt(this.goods.goods_num);
					skuInfo.skuImg = this.goods.goods_image;
					skuInfo.skuPlusPrice = this.goods.plus_price;
					skuInfo.skuShopMemPrice = this.goods.shop_mem_price;
					skuInfo.canChangeAddNum = false;
					skuInfo.sku_promotion_status = this.goods.promotion_status && this.goods.promotion_status == 1 ? 1 : 0;
					skuInfo.promotion_price = this.goods.promotion_status && this.goods.promotion_status == 1 ? this.goods.act_price : 0;

					this.selectSkuDetailId = -1;
					this.skuInfo = skuInfo;
				}
			},

			//获取规格
			getSku() {
				let data = {};
				data.goods_id = this.goods.goods_id ? this.goods.goods_id : this.goods.id; // 如果父组件是商品列表商品id
				if (this.goods.store_id) {
					data.store_id = this.goods.store_id
				}

				app.sendRequest({
					url: this.goodsType == 1 ? '/MerchantGoods/getGoodsSkuInfo' : '/Goods/getGoodsSku_v1',
					needSign: false,
					data: data,
					loadTitle: '加载中...',
					success: (res) => {
						if (res.status == 1) {
							let skuSelectIndex = [];
							let selectArr = [];
							let skuList = this.goodsType == 1 ? res.data.sku_attr_list : res.data.skuList;
							let checks = this.skuselect.length ? this.skuselect : (this.goods.sku_id_list ? this.goods.sku_id_list.split(',') : null);
							for (let i = 0; i < skuList.length; i++) {
								if (checks && checks[i]) {
									for (let j = 0; j < skuList[i].list.length; j++) {
										if (skuList[i].list[j].id == checks[i]) {
											skuSelectIndex.push(j);
											break;
										}
									}
								} else {
									skuSelectIndex.push(-1);
								}

								selectArr.push(0);
							}

							this.skuInfo.skuImg = this.goodsType == 1 ? res.data.goods_info.path : res.goods_img;
							this.skuInfo.skuName = this.goodsType == 1 ? res.data.goods_info.goods_name : res.goods_name;
							this.skuInfo.skuSelectIndex = skuSelectIndex;
							this.skuInfo.skuList = skuList;
							if (this.skutype == 4) {
								this.skuInfo.shoppingNum = 1; // 商品默认数量
								this.skuInfo.skuShopMemStatus = this.goods.shop_mem_status;
								this.skuInfo.skuPlusMemStatus = this.goods.plus_mem_status;
								this.skuInfo.skuPlusPrice = this.goods.plus_price;
								this.skuInfo.skuShopMemPrice = this.goods.shop_mem_price;
							}
							if (this.goodsType == 1) {
								res.data.sku_detail_list.forEach(item => {
									item.id = item.sku_id;
									item.goods_img = item.path ? item.path : res.data.goods_info.path;
									item.goods_num = 999;
								})
							} else {
								this.skuInfo.skuNum = res.goods_num;
								this.goods.goods_num = res.goods_num;
							}
							this.setData({
								oldSkuId: this.skutype != 4 ? this.goods.goods_id : this.goods.id,
								skuDetailList: this.goodsType == 1 ? res.data.sku_detail_list : res.data.skuDetailList,
								selectSkuDetailId: '',
								selectArr: checks && checks.length ? checks : selectArr,
							});
							// debugger
							this.cratedSku();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								// #ifndef MP-ALIPAY
								duration: 1000,
								// #endif
							});
						}
					}
				});
			},

			handleSku() {
				switch (this.skutype) {
					case 1:
					case 4:
						// console.log('触发组件this.getSku')
						if (this.goodsType == 1 && this.goods.attribute == 2 || this.goodsType == 2 && this.goods.attribute_state == 2) {
							this.getSku()
						}
						break;
					case 3:
					case 5:
						// this.skuDetailList = JSON.parse(JSON.stringify(this.$props.sku.skuDetailList))
						this.showGoodsSku(this.goods.selectGoodsSkuIndex)
						break;
					case 2:
						this.setData({
							skuDetailList: JSON.parse(JSON.stringify(this.$props.goodsinfo.skuDetailList)),
							selectArr: JSON.parse(JSON.stringify(this.$props.goodsinfo.selectArr)),
						})
						this.cratedSku()
						break;
				}
			},

			// 展示plus会员价条件
			showPlusPrice() {
				return app.showPlusPrice(this.goods)
			},

			// 展示会员价条件
			showVipPrice() {
				return app.showVipPrice(this.goods)
			},

			// 展示普通价格
			showOnlinePrice() {
				return app.showOnlinePrice(this.goods)
			}

		},
		mounted() {
			// console.log('$props=', this.$props)
			for (let i in this.sku) {
				this.skuInfo[i] = this.sku[i];
			}
			this.goods = {
				...this.goodsinfo
			};
			this.handleSku()
		},
		computed: {
			plus_register_state: () => {
				return app.XcxData.plus_register_state
			},
			vip_register_state: () => {
				return app.XcxData.vip_register_state
			},
			skuBoxStyle() {
				return 'padding-bottom:' + (this.$store.bottomHeight + 14) + 'rpx'
			},
		},
	}
</script>
